import React, { PureComponent } from 'react';
import { Form, Row, Col, DatePicker, Input, Button, Timeline } from 'antd';
import moment from 'moment';
import styles from './index.less';

const { TextArea } = Input;

export default class Index extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            mode: 'list'
        }
    }

    componentDidMount() {
        const { dispatch, modularName, event } = this.props;

        dispatch({
            type: `${modularName}/queryEventProcess`,
            payload: {
                eventId: event.id,
                callback: (data) => {
                    this.setState({ list: [...data] })
                }
            }
        });
    }

    okClick = () => {
        const { dispatch, form, modularName, currentUnit, event } = this.props;
        const { data = {} } = this.state;

        form.validateFields({ force: true }, (err, values) => {
            if (!err) {
                let { processTime, ...extra } = values;

                if (processTime) {
                    processTime = processTime.format('YYYY-MM-DD HH:mm:ss');
                }

                dispatch({
                    type: `${modularName}/saveOrUpdateEventProcess`,
                    payload: {
                        data: {
                            id: data.id,
                            eventId: event.id,
                            processTime,
                            ...extra,
                            unit_id: {
                                id: currentUnit.id
                            }
                        },
                        eventId: event.id,
                        callback: (data) => {
                            this.setState({ mode: 'list', data: {}, list: [...data] });
                        }
                    }
                });
            }
        });
    }

    deleteBtnClick = (record) => {
        const { dispatch, modularName, event } = this.props;

        dispatch({
            type: `${modularName}/deleteEventProcess`,
            payload: {
                ids: [record.id],
                eventId: event.id,
                callback: (data) => {
                    this.setState({ list: [...data] });
                }
            }
        });
    }

    render() {
        const { list = [], mode, data = {} } = this.state;
        const { form, currentUnit } = this.props;
        const { getFieldDecorator } = form;

        return (
            mode === 'list' ?
                <div>
                    <div style={{ color: '#409eff', cursor: 'pointer', marginBottom: 12 }} onClick={() => this.setState({ mode: 'append' })}>添加记录</div>
                    {list && list.length > 0 ?
                        <Timeline>
                            {list.map(item => {
                                const { unit_id = {} } = item;

                                return (
                                    <Timeline.Item color='#e4e7ed'>
                                        <div style={{ color: '#909399', marginBottom: 8 }}>
                                            {item.processTime}
                                        </div>
                                        <div className={styles.process_item_card} style={{ color: 'rgb(51, 51, 51)', fontSize: 16, padding: 20, position: 'relative' }}>
                                            <div style={{ color: 'rgb(43, 151, 239)', fontSize: 14, marginBottom: 8 }}>
                                                {unit_id.unit_name}
                                            </div>
                                            <div style={{ fontSize: 15 }}>
                                                {item.processContent}
                                            </div>
                                            {currentUnit.id === unit_id.id &&
                                                <div style={{ position: 'absolute', top: 20, right: 20 }}>
                                                    <Button type='primary' shape='circle' icon='edit' style={{ marginRight: 16 }} onClick={() => this.setState({ mode: 'modify', data: item })} />
                                                    <Button type='danger' shape='circle' icon='delete' onClick={this.deleteBtnClick.bind(this, item)} />
                                                </div>
                                            }
                                        </div>
                                    </Timeline.Item>
                                );
                            })}
                        </Timeline> :
                        <div className={styles.process_item_card} style={{ color: 'rgb(51, 51, 51)', fontSize: 16, padding: 20 }}>
                            当前事件无流程记录
                        </div>
                    }
                </div> :
                <div>
                    <Form layout='vertical'>
                        <Row gutter={16} type='flex'>
                            <Col span={12}>
                                <Form.Item label='记录时间'>
                                    {getFieldDecorator('processTime', {
                                        initialValue: data.processTime ? moment(data.processTime, 'YYYY-MM-DD HH:mm:ss') : undefined,
                                        rules: [{ required: true, message: '该项为必填项' }]
                                    })(
                                        <DatePicker showTime placeholder='请选择记录时间' size='large' style={{ width: '100%' }} />
                                    )}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Form.Item label='记录内容'>
                            {getFieldDecorator('processContent', {
                                initialValue: data.processContent || undefined,
                                rules: [{ required: true, message: '该项为必填项' }]
                            })(
                                <TextArea rows={6} placeholder='请输入记录内容' />
                            )}
                        </Form.Item>
                    </Form>
                    <Button type='primary' size='large' style={{ marginRight: 16 }} onClick={this.okClick}>确定</Button>
                    <Button size='large' onClick={() => this.setState({ mode: 'list', data: {} })}>取消</Button>
                </div>
        );
    }
}